<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import '@/fonts/icomoon.css'
const route = useRoute()
const router = useRouter()
import * as echarts from 'echarts'

// 初始数据
let updateInterval = null;
const xAxisData = ref(['0', '1', '2', '3', '4', '5']);
const seriesData = ref([50, 48, 52, 54, 44, 250]);
// 柱状图1
const initAxis1Charts = () => {
    const charts = echarts.init(document.querySelector('.axis1'));
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: xAxisData.value
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisPointer: {
                snap: true
            }
        },
        // 修改刻度颜色
        axisLabel: {
            color: '#4c9bfd',
            fontSize: 10
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [
                {
                    lte: 4,
                    color: 'green'
                },
                {
                    gt: 4,
                    lte: 5,
                    color: 'red'
                },
                {
                    gt: 5,
                    color: 'green'
                }
            ]
        },
        series: [
            {
                name: 'Packets',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: seriesData.value,
                markArea: {
                    itemStyle: {
                        color: 'rgba(255, 173, 177, 0.4)'
                    },
                    data: [
                        [
                            {
                                xAxis: '4'
                            },
                            {
                                xAxis: '5'
                            }
                        ],

                    ]
                }
            }
        ]
    };
    charts.setOption(option);
}
// 柱状图2
const initAxis2Charts = () => {
    const charts = echarts.init(document.querySelector('.axis2'));
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: xAxisData.value
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisPointer: {
                snap: true
            }
        },
        // 修改刻度颜色
        axisLabel: {
            color: '#4c9bfd',
            fontSize: 10
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [
                {
                    lte: 4,
                    color: 'green'
                },
                {
                    gt: 4,
                    lte: 5,
                    color: 'red'
                },
                {
                    gt: 5,
                    color: 'green'
                }
            ]
        },
        series: [
            {
                name: 'Bytes',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: seriesData.value,
                markArea: {
                    itemStyle: {
                        color: 'rgba(255, 173, 177, 0.4)'
                    },
                    data: [
                        [
                            {
                                xAxis: '4'
                            },
                            {
                                xAxis: '5'
                            }
                        ],

                    ]
                }
            }
        ]
    };
    charts.setOption(option);
}
// 动态更新数据
const updateData = () => {

    updateInterval = setInterval(() => {

        // 生成新的 x 轴数据
        const newXData = (parseInt(xAxisData.value[xAxisData.value.length - 1]) + 1).toString();
        // 生成新的随机数
        const newYData = Math.floor(Math.random() * 200);

        // 向数组中添加数据
        xAxisData.value.push(newXData);
        seriesData.value.push(newYData);

        // 更新图表
        const charts = echarts.init(document.querySelector('.axis1'));
        charts.setOption({
            xAxis: {
                data: xAxisData.value
            },
            series: [{
                data: seriesData.value
            }]
        });
    }, 2500);
};


// 饼图
const attackPoints = ref([
    { value: 140, name: 'naomal' },
    { value: 190, name: 'attack' }
])
const initAttackPieCharts = () => {
    const charts = echarts.init(document.querySelector('.attackPie'))
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        color: ['#00ff00', '#ed3f35'],

        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['40%', '40%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: attackPoints.value,

                label: {
                    fontSize: 15,
                    color: 'inherit'
                },
                labelLine: {
                    length: 15,
                    length2: 8
                }
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    charts.setOption(option)
    // 浏览器缩放，图表等比例缩放
    window.addEventListener('resize', function () {
        charts.resize()
    })
}

//柱图
const attackerBar = () => {
    const charts = echarts.init(document.querySelector('.attackerBar'))
    const option = {
        xAxis: {
            type: 'category',
            data: ['attack1', 'attack2', 'attack3', 'attack4', 'attack5', 'attack16'],
            // x轴线的颜色样式
            axisLine: {
                lineStyle: {
                    color: '#4c9bfd'
                }
            },
        },
        yAxis: {
            type: 'value',
            // x轴线的颜色样式
            axisLine: {
                lineStyle: {
                    color: '#4c9bfd'
                }
            },
        },
        tooltip: {
            trigger: 'item',
        },
        color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
                { offset: 0, color: '#00fffb' },//起始颜色，柱子顶端
                { offset: 1, color: '#0061ce' }
            ]
        ),
        series: [
            {
                data: [170, 150, 150, 140, 124, 122],
                type: 'bar'
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    charts.setOption(option)
}


onMounted(() => {
    initAxis1Charts()
    initAxis2Charts()
    updateData()
    initAttackPieCharts()
    attackerBar()
})
// 卸载前清除定时器
onUnmounted(() => {
    clearInterval(updateInterval);
});


</script>

<template>
    <div class="viewport1">
        <h3>网络攻击深度分析报告</h3>
        <div class="head">
            <img src="@/assets/ai4.jpg" alt="">
        </div>
        <div class="viewport">
            <div class="column">
                <div class="panel packets">
                    <div class="inner">
                        <h3>本次网络攻击增长模型:Packets</h3>
                        <div class="chart">
                            <div class="axis1" ref="axis1"></div>
                        </div>
                    </div>
                </div>
                <div class="panel attack">
                    <div class="inner">
                        <h3>本次网络攻击流量占比模型</h3>
                        <div class="chart">
                            <div class="data">
                                <div class="item">
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        attack
                                    </span>
                                </div>
                                <div class="item">
                                    <span>
                                        <i class="icon-dot" style="color: #00ff00"></i>
                                        normal
                                    </span>
                                </div>
                            </div>
                            <div class="attackPie" ref="attackPie"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="panel Bytes">
                    <div class="inner">
                        <h3>本次网络攻击增长模型:Bytes</h3>
                        <div class="chart">
                            <div class="axis2" ref="axis2"></div>
                        </div>
                    </div>
                </div>
                <div class="panel attacker">
                    <div class="inner">
                        <h3>拟攻击者画像</h3>
                        <div class="chart">
                            <div class="attackerBar" ref="attackerBar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.viewport1 {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 780px;

    display: flex;
    flex-direction: column;

    h3 {
        font-size: 20px;
        color: #fff;
        font-weight: 400;
        margin-left: 20px;
    }

    .head {
        // background-color: red;
        // border-radius: 5%;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 1450px;
            height: 380px;
            border-radius: 15px;
        }
    }

    .viewport {
        margin-top: 50px;
        background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
        display: flex;
        min-width: 1024px;
        max-width: 1920px;
        // margin: 0 auto;
        // padding: 88px 20px 0;
        min-height: 780px;
        // overflow: hidden;

        .column {
            flex: 2;
            // margin-right: 60px;
            margin: 0 20px;
            // background-color: pink;

            .panel {
                position: relative;
                border: 15px solid transparent;
                border-width: 51px 38px 20px 132px;
                border-image-source: url(@/assets/border.png);
                border-image-slice: 51 38 20 132;
                margin-bottom: 20px;

                h3 {
                    font-size: 20px;
                    color: #fff;
                    font-weight: 400;
                }

                .inner {
                    position: absolute;
                    top: -51px;
                    left: -132px;
                    right: -38px;
                    bottom: -20px;
                    padding: 24px 36px;
                    // background-color: red;

                }
            }
        }

    }

    .packets,
    .Bytes {
        height: 400px;

        .chart {

            .axis1,
            .axis2 {
                height: 390px;
                width: 620px;
                margin-top: -35px;
                // background-color: #fff;
            }
        }
    }

    .attack {
        height: 400px;

        .chart {
            display: flex;
            // flex-direction: column;
            // background-color: #fff;
            justify-content: center;
            align-content: space-between;
            margin-top: -20px;


            .data {
                position: absolute;
                display: flex;
                justify-content: space-between;

                width: 148px;
                padding: 36px 30px;
                // box-sizing: border-box;
                // background-image: url(@/assets/rect.png);
                background-size: cover;

                h4 {
                    margin-bottom: 12px;
                    font-size: 28px;
                    color: #fff;
                }

                span {
                    display: block;
                    color: #4c9bfd;
                    font-size: 16px;
                }
            }

            .attackPie {
                // margin-top: 40px;
                // position: absolute;
                bottom: -60px;
                left: 50px;
                height: 390px;
                width: 620px;
            }


        }
    }

    .attacker {
        height: 400px;

        .chart {

            .attackerBar {
                height: 390px;
                width: 620px;
                margin-top: -35px;
                // background-color: #fff;
            }
        }
    }
}
</style>